import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, ScrollView } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import BlurImg from 'src/components/blur-img'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import CustomImage from 'src/components/image/CustomImage'
import styles from '../css/BriefIntroductionCss'
import { ImageHost } from 'src/config/index'
import CustomButton from 'src/components/button/CustomButton'

export default class BriefIntroduction extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    companyClick: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      numberOfWords: 83,
      moreType: false
    }
    this.welfareList = [
      {
        title: '五险一金',
        type: 1
      }, {
        title: '包住宿',
        type: 2
      }, {
        title: '下午茶',
        type: 3
      }, {
        title: '福利多多',
        type: 4
      }, {
        title: '年终奖',
        type: 1
      }, {
        title: '定期体检',
        type: 3
      }
    ]

    // 背景list
    this.welfareIconList = [require('@/imgC/company/company_welfar1.png'), require('@/imgC/company/company_welfar2.png'), require('@/imgC/company/company_welfar3.png'), require('@/imgC/company/company_welfar4.png')]
  }

  componentWillReceiveProps() {

  }

  more = () => {
    this.setState({
      moreType: !this.state.moreType
    })
  }

  render() {
    const { data = {} } = this.props
    const { numberOfWords, moreType } = this.state
    const string = (data.companyInfo || '').split('')
    const Images = data.companyPicUrl || []
    return (
      <View style={styles.homepageBody}>
        <View style={styles.briefIntroduction}>
          <View style={styles.briefIntroductionView}>
            <Text numberOfLines={moreType ? 2000 : 4} style={styles.briefIntroductionText}><Text style={styles.firstWord}>{string[0] || ''}</Text><Text style={styles.companyInfoText}>{string.length > 1 && string.filter((e, index) => index !== 0).join('')}</Text></Text>
            {string.length > 83 && <CustomButton onPress={this.more} style={styles.moreView}><Text style={styles.moreText}>{moreType ? '收起' : '更多'}</Text></CustomButton>}
          </View>
        </View>
        {(JSON.parse(data.benefits || '[]') || []).length > 0 && <View>
          <Text style={styles.title}>公司福利</Text>
          <ScrollView showsHorizontalScrollIndicator={false} style={{ marginLeft: ScaleS(20) }} horizontal={true}>
            {
              (JSON.parse(data.benefits || '[]') || []).map((item, index) => {
                return <View style={styles.welfareListItem} key={index}>
                  <BlurImg blurAmount={0} style={styles.welfareBackground} source={this.welfareIconList[item[2] - 1]}>
                    {item[1].length > 3 ? <View style={styles.welfareitem}>
                      <Text style={styles.white}>{item[1].split('')[0] + item[1].split('')[1]}</Text>
                      <Text style={styles.white}>{item[1].split('')[2] + item[1].split('')[3]}</Text>
                    </View> : <View style={styles.welfareitem}>
                        <Text style={styles.white} > {item[1]}</Text>
                      </View>}
                  </BlurImg>
                </View>
              })
            }
          </ScrollView >
        </View >}
        <View style={styles.addressView}>
          <Text style={styles.title}>公司地址</Text>
          {/* <CustomButton params={{ item: data }} onPress={jumpFn}> */}
          <CustomBoxShadow style={styles.address}>
            <CustomImage style={styles.addressIcon} source={require('@/imgC/company/company-homepage-icon.png')} />
            <Text style={styles.companyaddress}>{(data.companyAddress || '')}</Text>
          </CustomBoxShadow>
          {/* </CustomButton> */}
        </View>
        {
          !!(Images || []).length > 0 && <View style={styles.album}>
            <View style={styles.albumTitle}>
              <Text style={styles.title}>公司相册</Text>
              <Text style={styles.albumTitleSize}>{Images.length}</Text>
            </View>
            <View style={styles.albumImageListVie}>
              <ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
                {
                  (Images || []).map((item, index) => {
                    return <View key={index} style={styles.albumImage}><CustomImage style={styles.itemImage} source={{ uri: item }} /></View>
                  })
                }
              </ScrollView>
            </View>
          </View>
        }

        <View>
          {!!(data.registeredTime || data.registeredMoney || data.legalPerson) && <Text style={styles.title}>工商信息</Text>}
          <View>
            {!!data.registeredTime && <View style={styles.listDataItem}>
              <Text>成立时间</Text>
              <Text>{data.registeredTime || ''}</Text>
            </View>}
            {!!data.registeredMoney && <View style={styles.listDataItem}>
              <Text>注册资本</Text>
              <Text>{data.registeredMoney || ''}</Text>
            </View>}
            {!!data.legalPerson && <View style={styles.listDataItem}>
              <Text>法人代表</Text>
              <Text>{data.legalPerson || ''}</Text>
            </View>}
          </View>
        </View>
        <View style={styles.more}>
          <Text>
            数据来源：天眼查
          </Text>
          {/* <Text style={{ color: '#FFD810' }}> 查看更多</Text> */}
        </View>
      </View >
    )
  }
}
